<!DOCTYPE html>
<html>
<head>
    <title>实时支付数据分析</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入Bootstrap 5 CSS库，用于页面样式和响应式布局 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Chart.js库，用于绘制图表 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 全局页面样式 */
        body {
            padding: 20px; /* 页面内边距 */
            font-family: Arial, sans-serif; /* 字体设置 */
            background-color: #f8f9fa; /* 浅灰色背景 */
        }
        /* 卡片样式，添加阴影和下边距 */
        .card {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 卡片阴影效果 */
            margin-bottom: 20px; /* 卡片下边距 */
        }
        /* 图表容器样式，设置固定高度和相对定位 */
        .chart-container {
            height: 400px; /* 图表高度 */
            position: relative; /* 相对定位，便于Chart.js渲染 */
        }
        /* 统计表格样式，添加上边距 */
        .stats-table {
            margin-top: 20px; /* 表格上边距 */
        }
    </style>
</head>
<body>
    <!-- 主容器 -->
    <div class="container">
        <!-- 页面标题行 -->
        <div class="row mb-4">
            <div class="col">
                <h1 class="text-center">实时支付数据分析</h1>
                <p class="text-center text-muted">数据每5秒自动更新</p>
            </div>
        </div>

        <!-- 内容行，包含图表和统计信息 -->
        <div class="row">
            <!-- 左侧列：图表区域 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">支付方式金额统计</h5>
                    </div>
                    <div class="card-body">
                        <!-- 图表容器 -->
                        <div class="chart-container">
                            <canvas id="paymentChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧列：统计数据和系统状态 -->
            <div class="col-md-4">
                <!-- 统计数据卡片 -->
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">统计数据</h5>
                    </div>
                    <div class="card-body">
                        <!-- 统计数据容器，初始显示"加载中..." -->
                        <div id="statsContainer">
                            <p class="text-center">加载中...</p>
                        </div>
                    </div>
                </div>
                <!-- 系统状态卡片 -->
                <div class="card mt-3">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">系统状态</h5>
                    </div>
                    <div class="card-body">
                        <p>上次更新: <span id="lastUpdate">-</span></p>
                        <p>数据状态: <span id="dataStatus" class="badge bg-secondary">等待数据</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 声明图表对象变量
        let paymentChart = null;

        /**
         * 获取数据并更新图表
         * 该函数从API获取最新统计数据，更新图表和统计表格
         */
        function updateStats() {
            // 从API获取统计数据
            fetch('/api/stats')
                .then(response => response.json())
                .then(stats => {
                    // 更新最后更新时间为当前时间
                    document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();

                    // 检查数据是否有错误
                    if (stats.error) {
                        document.getElementById('dataStatus').textContent = '错误';
                        document.getElementById('dataStatus').className = 'badge bg-danger';
                        return;
                    }

                    // 检查数据是否为空
                    if (stats.length === 0) {
                        document.getElementById('dataStatus').textContent = '无数据';
                        document.getElementById('dataStatus').className = 'badge bg-warning';
                        return;
                    }

                    // 更新状态为正常
                    document.getElementById('dataStatus').textContent = '正常';
                    document.getElementById('dataStatus').className = 'badge bg-success';

                    // 准备图表数据：提取支付方式和总金额
                    const labels = stats.map(item => item.PAYWAY);
                    const data = stats.map(item => item.TOTAL_AMOUNT);

                    // 更新图表
                    if (paymentChart) {
                        // 如果图表已存在，更新数据
                        paymentChart.data.labels = labels;
                        paymentChart.data.datasets[0].data = data;
                        paymentChart.update();
                    } else {
                        // 如果图表不存在，初始化图表
                        const ctx = document.getElementById('paymentChart').getContext('2d');
                        paymentChart = new Chart(ctx, {
                            type: 'bar', // 柱状图类型
                            data: {
                                labels: labels, // X轴标签：支付方式
                                datasets: [{
                                    label: '支付金额', // 数据集标签
                                    data: data, // Y轴数据：金额
                                    // 设置柱状图背景色（半透明）
                                    backgroundColor: [
                                        'rgba(75, 192, 192, 0.6)',
                                        'rgba(54, 162, 235, 0.6)',
                                        'rgba(255, 159, 64, 0.6)'
                                    ],
                                    // 设置柱状图边框色
                                    borderColor: [
                                        'rgba(75, 192, 192, 1)',
                                        'rgba(54, 162, 235, 1)',
                                        'rgba(255, 159, 64, 1)'
                                    ],
                                    borderWidth: 1 // 边框宽度
                                }]
                            },
                            options: {
                                responsive: true, // 响应式图表
                                maintainAspectRatio: false, // 不保持纵横比，填充容器
                                scales: {
                                    y: {
                                        beginAtZero: true, // Y轴从0开始
                                        title: {
                                            display: true, // 显示Y轴标题
                                            text: '金额' // Y轴标题文本
                                        }
                                    }
                                }
                            }
                        });
                    }

                    // 更新统计表格
                    // 使用模板字符串构建HTML表格
                    let tableHtml = `
                        <table class="table table-striped stats-table">
                            <thead>
                                <tr>
                                    <th>支付方式</th>
                                    <th>金额</th>
                                </tr>
                            </thead>
                            <tbody>
                    `;

                    // 计算总金额并添加每行数据
                    let total = 0;
                    stats.forEach(item => {
                        tableHtml += `
                            <tr>
                                <td>${item.PAYWAY}</td>
                                <td>¥${item.TOTAL_AMOUNT.toFixed(2)}</td>
                            </tr>
                        `;
                        total += item.TOTAL_AMOUNT; // 累加总金额
                    });

                    // 添加表格底部的总计行
                    tableHtml += `
                            </tbody>
                            <tfoot>
                                <tr class="table-dark">
                                    <th>总计</th>
                                    <th>¥${total.toFixed(2)}</th>
                                </tr>
                            </tfoot>
                        </table>
                    `;

                    // 更新统计数据容器的HTML内容
                    document.getElementById('statsContainer').innerHTML = tableHtml;
                })
                .catch(error => {
                    // 处理获取数据时的错误
                    console.error('获取数据失败:', error);
                    document.getElementById('dataStatus').textContent = '连接错误';
                    document.getElementById('dataStatus').className = 'badge bg-danger';
                });
        }

        // 页面加载完成后立即更新一次数据
        document.addEventListener('DOMContentLoaded', updateStats);

        // 设置定时更新（每5秒），与后端分析频率一致
        setInterval(updateStats, 5000);
    </script>
</body>
</html>